/***************
      Color
***************/

@white:#FFFFFF;
@black:#1E1E1E;
@gray:#E6E6E6;
@gray-light:#FAFAFA;
@gray-shallow:#F0F0F0;
@gray-dark:#999999;
@gray-deep:#666666;

@blue:#00BCEA;
@blue-light:#7FE6FF;
@blue-shallow:#00CCFF;
@blue-deep:#00A7D1;
@blue-dark:#007E9E;

@green:#A5CF4F;
@green-light:#D5FF7F;
@green-shallow:#B8E858;
@green-deep:#90B545;
@green-dark:#678231;

@red:#F15062;
@red-light:#FF7F8E;
@red-shallow:#FF576A;
@red-deep:#D94758;
@red-dark:#A63643;

@color:@blue;
@color-light:@blue-light;
@color-shallow:@blue-shallow;
@color-deep:@blue-deep;
@color-dark:@blue-dark;

@subcolor:@green;
@subcolor-light:@green-light;
@subcolor-shallow:@green-shallow;
@subcolor-deep:@green-deep;
@subcolor-dark:@green-dark;

@danger:@red;
@danger-light:@red-light;
@danger-shallow:@red-shallow;
@danger-deep:@red-deep;
@danger-dark:@red-dark;

@shadow-1: rgba(0,0,0,0.24) 0px 1px 1px,rgba(0,0,0,0.07) 0px 0px 4px;
@shadow-1-float: rgba(0,0,0,0.24) 0px 2px 2px,rgba(0,0,0,0.07) 0px 0px 4px;
@shadow-2: rgba(33,33,33,0.12) 0px 0px 7px,rgba(33,33,33,0.12) 0px 3px 5px;
@shadow-3: rgba(33,33,33,0.12) 0px 5px 10px,rgba(33,33,33,0.12) 0px 10px 30px,rgba(33,33,33,0.12) 0px 20px 40px;
/* 阴影（低 / 中 / 高） */

/***************
    Fontsize
***************/

@size0:0.75rem; /* 脚注类文本 */
@size1:1rem; /* 绝大多数的正常普通文本 */
@size2:1.5rem; /* 普通文本的上级标题 */
@size3:2rem; /* 模块区域类标题 */
@size4:3rem; /* 需要更突出的文字 */
@size5:3.5rem; /* 极特殊情况下、美工要求下使用的变态类字号 */
@size6:4.5rem; /* 极特殊情况下、美工要求下使用的变态类字号 */

/***************
    Animation
***************/

@ease-normal:cubic-bezier(0,0.5,0.5,1);
@ease-strong:cubic-bezier(0,1,0.5,1);
@ease-leave:cubic-bezier(1,0,0.5,0.7);

/***************
      Layout
***************/

@gird: 8px;
@top:999;
/* 当涉及padding,margin等布局问题的时候，其值应该为@grid的倍数，即margin: 3*@gird */

/***************
    Functions
***************/

.noselect(){
    user-select:none;
}

.transition(@props:all,@time:200ms,@ease:ease){
    transition: @props @time @ease;
}

.GPUAccelerator (){
    // 开启硬件加速
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
}

.GPUFixer (@index:1){
    // 如果元素的同级元素在复合层中渲染
    // 而这个同级元素的z-index比较小
    // 那么这个元素（不管是不是应用了硬件加速样式）
    // 也会被放到复合层中
    // 所以使用index修复重复创建复合层的问题
    z-index: @index;
}
